// "use client"
// import React from 'react';

// function useMouse() {
//   const [position, setPosition] = React.useState({
//     clientX: 0,
//     clientY: 0,
//     pageX: 0,
//     pageY: 0,
//     screenX: 0,
//     screenY: 0
//   });

//   React.useEffect(() => {
//     const updatePosition = (e: MouseEvent) => {
//       setPosition({
//         clientX: e.clientX,
//         clientY: e.clientY,
//         pageX: e.pageX,
//         pageY: e.pageY,
//         screenX: e.screenX,
//         screenY: e.screenY
//       });
//     };

//     window.addEventListener('mousemove', updatePosition);

//     return () => {
//       window.removeEventListener('mousemove', updatePosition);
//     };
//   }, []);

//   return position;
// }

// export default function Page() {
//   const mouse = useMouse();

//   return (
//     <div>
//       <p>Client - x: {mouse.clientX}, y: {mouse.clientY}</p >
//       <p>Page - x: {mouse.pageX}, y: {mouse.pageY}</p >
//       <p>Screen - x: {mouse.screenX}, y: {mouse.screenY}</p >
//     </div>
//   );
// }
// ~~~~~~~~~~~~~~~~~~~
// "use client";
// import { useMount } from 'ahooks';
// import { message, Button } from 'antd';
// import React, { useEffect, useState } from 'react';
// const MyComponent = () => {
//   const [messageApi, contextHolder] = message.useMessage();
//   useEffect(() => {

//     messageApi.info("测试数据")
//     console.log(messageApi, "| messageApi");
//   }, [])
//   return <div>Hello World</div>;
// };
// export default () => {
//   const [state, setState] = useState<boolean>(false);
//   return (
//     <>
//       <Button onClick={() => setState(!state)}>
//         {state ? 'unmount' : 'mount'}
//       </Button>
//       {state && <MyComponent />}
//     </>
//   );
// };

// ~~~~~~~~~~~~~~~~~~~

"use client"
import { useRequest } from "ahooks"
import axios from "axios"
import React from "react"
async function getSearchData(search?: string): Promise<string[]> {
  const res = await axios.get("/api/home", {
    params: {
      title: search
    }
  })
  return res.data
}

export default () => {
  const { data, loading, run } = useRequest(getSearchData, {
    debounceWait: 500,
    manual: true,
  });
  return (
    <div>
      <input
        placeholder="搜索城市数据"
        onChange={(e) => run(e.target.value)} />
      {loading ? (
        <p>loading</p>
      ) : (
        <ul style={{ marginTop: 8 }}>
          {data?.map((i) => {
            return <li key={i}>{i}</li>
          })}
        </ul>
      )}
    </div>
  )
}